<!doctype html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
  <title>king私属空间</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />  
  <link rel="stylesheet" href="js/idangerous.swiper.css">
  <link rel="stylesheet" href="js/style.css">
  <link rel="stylesheet" href="js/touch.css" media="screen and (max-width:1000px)">
</head>

<body class="ind_body">
  <div class="ind_block">
    <div class="indTe_ul">
      <a href="javascript:;" class="indTe_a" style="margin-right:20px">技术支持：吴灿</a> <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2022124439号</a>
    </div>
    <iframe src="js/index.html" class="ind_iframe"></iframe>
    <div class="ind_logo">
      <div class="ind_logoBlock">
        <div class="bg0 pa">
          <div class="bg1">
            <div class="ind_img">
              <div class="ind_imgUl">
                <!-- <img src="images/bg21.png"> -->
                <!-- <img src="images/bg22.png">
                <img src="images/bg23.png">
                <img src="images/bg24.png">
                <img src="images/bg25.png">
                <img src="images/bg26.png">
                <img src="images/bg27.png"> -->
              </div>
            </div>
            <div class="indT_ul">
              <span>科</span><span>技</span><span>传</span><span>播</span><span>艺</span><span>术</span>
            </div>
          </div>
        </div>
        <div class="hx-box pa">
          <ul class="pr">
            <li class="hx-k1 pa0">
              <span></span>
            </li>
            <li class="hx-k2 pa0">
              <span></span>
            </li>
            <li class="hx-k3 pa0">
              <span></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="ind1_block">
      <div class="ind1_bg"></div>
      <div class="ind5_block">
        <div class="ind1_centerBl">
            <div class="moving-zone">
              <div class="popup">
                <div class="ind1_ulBl">
                  <div class="ind1_In">
                    <div class="swiper-container swiper-container02">
                      <div class="swiper-wrapper">
                        <!-- <div class="swiper-slide">
                                      <a href="page/1/index.html" target="_block" class="ind1_img"><img src="page/1/1.jpg" /></a>
                                    </div>                   -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
      <div class="ind5_ul">
        <div class="ind1_title"></div>
        <div class="indUl_ul">
          <!-- <a href="page/1/index.html" target="_block" class="indUl_li">
            <div class="ind2_ti">DEMO ONE</div>
          </a>         -->
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <div class="alert_block">页面使用了最新H5技术，您的浏览器版本过低，建议使用新版本浏览器观看，效果更佳喔！</div>
  <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="js/idangerous.swiper.min.js"></script>
  <script type="text/javascript" src="config.js"></script>
  <script type="text/javascript">
    $(function () {
      const srcArray = ['js/index.html','js/index2.html', 'js/index3.html']
      let r = parseInt(Math.random() * 10) % 3;
      $(".ind_iframe").attr({src:srcArray[r]})

      //进场动画
      setTimeout(function () {
        $(".ind_logo").addClass("active")
      }, 1000)
      setTimeout(function () {
        $(".ind1_block").addClass("active")
      }, 1600)      

      //根据(config.js)配置生成相应html
      var nanoid = (t=21)=>crypto.getRandomValues(new Uint8Array(t)).reduce(((t,e)=>t+=(e&=63)<36?e.toString(36):e<62?(e-26).toString(36).toUpperCase():e>62?"-":"_"),"");      
      $(".ind1_title").text(init.title)
      var swiperText = ''
      var navText = ''
      var n = ['DEMO ONE','DEMO TWO','DEMO THREE','DEMO FOUR','DEMO FIVE']
      for(var i = 0;i < init.pageObject.length;i++){
        swiperText += '<div class="swiper-slide"><a href="page/1/index.html?m='+i+'&id='+(nanoid() || 0)+'" target="_block" class="ind1_img"><img src="img/'+i+' (1).jpg"/></a></div>'
        navText += '<a href="page/1/index.html?m='+i+'&id=' + (nanoid() || 0) +'" target="_block" class="indUl_li"><div class="ind2_ti">'+n[i]+'</div></a>'
      }
      $(".swiper-container02 .swiper-wrapper").html(swiperText)
      $(".indUl_ul").html(navText)   

      //swiper
      var on = 0;
      var mySwiper = new Swiper('.swiper-container02', {
        paginationClickable: true,
        onSlideChangeEnd: function (swiper) {
          on = mySwiper.activeIndex;
          $(".indUl_li").eq(on).addClass("cur").siblings().removeClass("cur");
        }
      })
      function thisFun() {
        mySwiper.swipeTo(on);
        $(".indUl_li").eq(on).addClass("cur").siblings().removeClass("cur");
      }
      thisFun();
      $(".indUl_li").on("mouseover", function () {
        on = $(this).index();
        thisFun();
      })

      //3D
      var moveForce = 5; // 移动参数
      var rotateForce = 5; // 旋转参数
      if($(window).width() > 1000){
        $(document).mousemove(function (e) {
          var docX = $(document).width();
          var docY = $(document).height();
          var moveX = (e.pageX - docX / 2) / (docX / 2) * -moveForce;
          var moveY = (e.pageY - docY / 2) / (docY / 2) * -moveForce;
          var rotateY = (e.pageX / docX * rotateForce * 2) - rotateForce;
          var rotateX = -((e.pageY / docY * rotateForce * 2) - rotateForce);
          $('.popup')
            .css('left', moveX + 'px')
            .css('top', moveY + 'px')
            .css('transform', 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)');
        });
      }

    })
  </script>
</body>

</html>